<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>现金应收应付</title>
    <!--    link用于定义链接的文件和html文档之间的关系 stylesheet的意思就是样式调用-->
    <!--    media 区分调用那个css样式 all 用于所有设备类型-->
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/font.css">
    <style>::-webkit-scrollbar{display: none;}</style>
</head>
<body>
<blockquote class="layui-elem-quote news_search">
<table class="layui-hide" id="MoneyTable" lay-filter="MoneyList"></table>

<!-- 多条件查询层开始 注意：要与数据表格放在一起-->
<script type="text/html" id="Trans_search">
    <div style="float: left">
        <form class="layui-form layui-col-md12 x-so" >
            现金业务日期：
            <div class="layui-input-inline">
                <input type="date" id="businDate" name="businDate" placeholder="请输入现金业务日期"、autocomplete="off" class="layui-input"/>
            </div>
            <button id="search" class="layui-btn layui-btn-primary layui-bg-gray" lay-submit data-type="reload"
                    lay-filter="provinceSearch">
                <i class="layui-icon">&#xe615;</i>
            </button>
        </form>
    </div>
    <!-- 表格头部上方工具栏 -->
    <div class="layui-btn-container layui-input-inline" style="padding-left: 150px">
        <button class="layui-btn layui-btn-danger" lay-event="batchDel"><i class="layui-icon">&#xe640;</i>批量删除</button>
        <button class="layui-btn layui-btn-primary" style="color: red" lay-event="deleteData"><i class="layui-icon">&#xe64d;</i>对冲销</button>
        <!--<button class="layui-btn layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>-->
    </div>
</script>
<!-- 多条件查询层结束 -->

<!-- 添加/修改界面开始 -->
<div id="data-main" style="display: none;">
    <div style="margin-left: 90px;margin-top: 20px">
        <form class="layui-form" id="MoneyForm" method="POST" lay-skin="line" lay-filter="MoneyFormTest">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 250px;right: 170px;top: 5px;">现金应收应付ID</label>
                <div class="layui-input-inline" style="right: 170px;top: 5px">
                    <input name="moneyId" lay-verify="required" placeholder="请输入现金应收应付ID" autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="top: -48px;right: -330px">业务日期</label>
                <div class="layui-input-inline" style="top: -48px;right: -330px">
                    <input type="date" name="businDate" lay-verify="required" placeholder="请输入业务日期" autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 250px;right: 170px;top: -40px">现金账户ID</label>
                <div class="layui-input-inline" style="right: 170px;top: -40px">
                    <select name="caId" class="layui-inline" id="caId">
                        <option  value="">---请选择---</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 250px;right: -160px;top: -90px">金额</label>
                <div class="layui-input-inline" style="right: -160px;top: -90px">
                    <input type="text" name="money" lay-verify="required" placeholder="请输入金额" autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 250px;right: 170px;top: -90px">业务类型</label>
                <div class="layui-input-inline" style="right: 170px;top: -90px">
                    <div class="layui-input-inline">
                        <select name="businType">
                            <option value="">---请选择---</option>
                            <option value="1">清算款</option>
                            <option value="2">债券利息</option>
                            <option value="3">增值估值</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 250px;right: -160px;top: -140px">资金流向</label>
                <div class="layui-input-inline" style="right: -160px;top: -140px">
                    <div class="layui-input-inline">
                        <select name="capFlow">
                            <option value="">---请选择资金流向---</option>
                            <option value="1">流入</option>
                            <option value="-1">流出</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 250px;right: 170px;top: -140px">基金ID</label>
                <div class="layui-input-inline" style="right: 170px;top: -140px">
                    <select name="fundId" class="layui-inline" id="fundId">
                        <option id="option" value="">---请选择---</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 250px;right: -160px;top: -190px">统计状态</label>
                <div class="layui-input-inline" style="right: -160px;top: -190px">
                    <input type="text" name="states" lay-verify="required" placeholder="请输入Ta库存ID" autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item" >
                <div class="layui-input-block" style="width: 250px;right: -120px;top: -180px">
                    <button class="layui-btn layui-bg-blue" lay-submit lay-filter="formSave">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- 添加/修改界面结束 -->

<!-- 行中操作按钮[仅对本行操作] -->
<script type="text/html" id="barDemo">
    <!--<a class="layui-btn layui-btn-xs layui-btn-normal layui-icon layui-icon-edit" lay-event="update">修改</a>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-icon layui-icon-delete" lay-event="delete">删除</a>
</script>
<script type="text/javascript">
    layui.use(['table','jquery','layer','util','laypage','form',],function () {
        var table=layui.table,
            $=layui.jquery,
            layer=layui.layer,
            util=layui.util,
            laypage=layui.laypage,
            form=layui.form;
        //渲染表格
        var one="";
        var two="";
        var three="";
        var four="";
        var five="";
        var six="";
        table.render({
            elem:"#MoneyTable",
            url:"../moneycontrollers/moneyities",
            toolbar: '#Trans_search',
            mehtod:'get',
            height:740,
            limit:15,
            cols:[[
                {checkbox:true},
                {field:"moneyId",title:"现金应收应付编号",align:"center",sort:true},
                {field:"businDate",title:"业务日期",align:"center",sort:true},
                {field:"caId",title:"现金账户名称",align:"center",sort:true,templet:function (d) {
                        for (var i=0;i<six.length;i++){
                            if(six[i].caId==d.caId){
                                return six[i].accName;
                            }
                        }
                    },width: 200},
                {field:"capFlow",title:"资金流向",align:"center",sort:true,templet:function (d) {
                        if(d.capFlow==1){
                            return "<span style='color: #9BCA63;'>流入</span>";
                        }else if(d.capFlow==-1){
                            return "<span style='color: #FAD860;'>流出</span>";
                        }
                    }},
                {field:"businType",title:"业务类型",align:"center",sort:true},
                {field:"money",title:"金额(元)",align:"center",templet:function (d) {
                        if (d.money.toString().indexOf(".")!=-1){
                            return d.money.toLocaleString();
                        }else{
                            return (d.money+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')+".00";
                        }
                    }},
                {field:"fundId",title:"基金名称",align:"center",sort:true,templet:function (d) {
                        for (var i=0;i<four.length;i++){
                            if(four[i].fundId==d.fundId){
                                return four[i].fundName;
                            }
                        }
                    },width: 200},
                /*{field:"states",title:"统计状态",align:"center",sort:true,templet:function (d) {
                        if(d.states==1){
                            return "<span style='color: #9BCA63;'>已统计</span>";
                        }else if(d.states==0){
                            return "<span style='color: #FAD860;'>未统计</span>";
                        }
                    }},*/
                {fixed: 'right', title:'操作', toolbar: '#barDemo',width:160}
            ]],
            page:true,
            limits: [5, 10,20,30,50],
            parseData:function (res) {
                //基金
                four=res.fund;
                //alter(JSON.stringify(se));
                var fourStr="<option value=''>--请选择--</option>";
                for (var i = 0; i <four.length; i++) {
                    fourStr+="<option value='"+four[i].fundId+"'>"+four[i].fundName+"</option>";
                }
                $("#fundId").html(fourStr);
                //现金账户
                six=res.cashAccount;
                var sixStr="<option value=''>--请选择--</option>";
                for (var i = 0; i <six.length; i++) {
                    sixStr+="<option value='"+six[i].caId+"'>"+six[i].accName+"</option>";
                }
                $("#caId").html(sixStr);
                return {
                    "code":res.code,
                    "msg":res.msg,
                    "count":res.count,
                    "data":res.data
                }
            },
        });
        //表格头部工具栏事件代码，根据lay-event属性值判断执行相应的代码
        table.on('toolbar(MoneyList)',function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            //判断事件event值
            switch(obj.event) {
                //批量删除操作：删除选定的多行数据
                case "batchDel":
                    //获得选中的表格行
                    var data = checkStatus.data;
                    //判断是否大于0行
                    if(data.length>0){
                        layer.confirm('请确认是否真的删除?', function(index){
                            //获取所有选择的id
                            var moneyIdStr="";

                            for (var i = 0; i < data.length; i++) {
                                moneyIdStr = moneyIdStr+data[i].moneyId+",";//累加字符
                            }
                            //去掉最后多余的逗号
                            moneyIdStr=moneyIdStr.substring(0,moneyIdStr.length-1);
                            layer.close(index);
                            //使用ajax删除选中的
                            $.ajax({
                                type: "put",//请求方式为put,来替代delete
                                url: "/moneycontrollers/batchBel/"+moneyIdStr,//后台Servlet路径
                                success: function(msg){
                                    layer.msg('删除成功');
                                    //重新加载表格数据
                                    table.reload('MoneyTable');
                                }
                            });
                        });
                    }else{
                        //没有选择数据行
                        layer.msg('你至少选一行！');
                    }
                    break;
                case 'add':
                    //显示添加界面
                    method="add";
                    //清空表单
                    $("#MoneyForm")[0].reset();
                    layer.open({
                        type: 1,//外部页面为2，内部层1
                        title: "<span style='color:white' align='center'><i class='layui-icon'>&#xe61f;</i> 添加现金应收应付</span>",
                        area: ["60%","60%"],
                        fix: false,
                        maxmin: true,
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'layui-layer-lan',
                        content:$("#data-main").html()
                    });
                    //将主键设置成允许修改[防止因先修改，后增加时，该字段被设置为只读]
                    $("input[name='moneyId']").prop("readonly",false);
                    break;
                case "deleteData":
                    layer.confirm('您确认冲销吗?', {
                        btn: ['确定','取消'] //按钮
                    }, function(){
                        //对冲销：通过ajax发送请求到后台，执行对冲销
                        $.ajax({
                            type: "delete",//请求方式为delete
                            url: "/moneycontrollers/method",//后台Servlet路径
                            data:"",
                            success: function(msg){
                                if (msg=="success")
                                    layer.msg('冲销成功',{icon:1});
                                else layer.msg("冲销失败",{icon:2})
                                //重新加载表格数据
                                table.reload('MoneyTable');
                            }
                        });
                    }, function(){
                        layer.msg('你已取消', {
                            time: 2000, //20s后自动关闭
                        });
                    });
                    break;
            }
        });

        //监听表格行工具(操作)事件 [不能和前面写在一起，原因二者参数有区别：前者toolbar，这里为tool]
        table.on("tool(MoneyList)",function (obj) {
            //得到表格行数据
            var data=obj.data;
            //判断事件event值，与lay-event属性比较(使用switch或if梯形结构都可以,前面已经用过switch,
            // 此处使用if梯形结构)
            //判断是否为行修改操作
            if(obj.event == "update"){
                //将设置表单操作方式为修改
                method="update";
                //设置界面信息
                layer.open({
                    type: 1,
                    title:'<span style=\'color:white\' ><i class=\'layui-icon\'>&#xe6b2;</i> 修改现金应收应付</span>',
                    area: ["60%","60%"],
                    shade: 0.4,
                    skin: 'layui-layer-lan',
                    content: $("#data-main").html()
                });
                //alert(data.empName+","+data.hiredate);
                //将当前行数据显示在表单各字段中
                form.val("MoneyFormTest", {
                    "moneyId": data.moneyId,
                    "businDate":data.businDate,
                    "caId":data.caId,
                    "capFlow":data.capFlow,
                    "businType":data.businType,
                    "money":data.money,
                    "fundId":data.fundId,
                    "taStockId":data.taStockId,
                    "states":data.states
                });
                //将主键设置成只读:不允许修改
                $("input[name='Id']").prop("readonly","readonly");
            }
        });
        //监听表格行工具(操作)事件 [不能和前面写在一起，原因二者参数有区别：前者toolbar，这里为tool]
        table.on("tool(MoneyList)",function (obj) {
            //得到表格行数据
            var data=obj.data;
            //判断事件event值，与lay-event属性比较(使用switch或if梯形结构都可以,前面已经用过switch,
            // 此处使用if梯形结构)
            if(obj.event == "delete"){//判断是否为行删除操作
                layer.confirm("真的删除现金应收应付库存为"+data.moneyId+"这行数据吗?", function(index){
                    //执行表格中删除操作
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        type: "delete",
                        url: "/moneycontrollers/moneyities/"+data.moneyId,//后台Servlet路径
                        success: function(msg){
                            //重新加载表格数据
                            table.reload('MoneyTable');
                            layer.msg(msg);
                        }
                    });
                });
            }
        });

        //多条件搜索
        //搜索表单中提交按钮的事件代码
        form.on("submit(provinceSearch)",function (data) {
            //定义表单数据对象
            var formData=data.field;
            //得到表单数据json字符串
            var json=JSON.stringify(data.field);
            //alert(json);
            //重新加载表格对象
            table.reload("MoneyTable",{
                //页码
                page:{
                    curr:1
                },
                //条件数据，会带到后台
                where:{
                    businDate:formData.businDate
                }
            });
            return false;
        });
    });
</script>
</blockquote>
</body>
</html>